<template>
  <transition name="slide">
    <div class="city">
      <header class="header">
        <ul>
          <router-link to = "/" tag="li">
            <span class="iconfont icon-zuojiantou2"></span>
          </router-link>
          <li>
            城市选择
          </li>
          <li></li>
        </ul>
      </header>
      <div class="content">
        <mt-index-list>
          <mt-index-section :index="item.letter" :key="index" v-for="(item, index) of citylist">
            <mt-cell @click.native="selectCity(itm)" :title="itm.name" v-for="(itm, idx) of item.cities" :key="idx"></mt-cell>
          </mt-index-section>
        </mt-index-list>
      </div>
    </div>
  </transition>
</template>
<script>
import Vue from 'vue'
import { IndexList, IndexSection } from 'mint-ui'
import axios from 'axios'
Vue.use(IndexList, IndexSection)
export default {
  data () {
    return {
      citylist: []
    }
  },
  created () {
    axios.get('/daxun/city.json')
      .then(data => {
        console.log(data)
        this.citylist = data.data
      })
  },
  methods: {
    selectCity (itm) {
      console.log(itm.name)
      sessionStorage.setItem('city', itm.name)
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.city{
  .header{
    height: 0.44rem;
    border-bottom: 1px solid #ccc;
    ul{
      height: 0.44rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 0.1rem;
      li{
        font-size: 0.16rem;
      }
    }
  }
}
</style>
